<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用（一）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <br>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <br>
    <br>
    <div id="box1"></div>
</body>
</html>
<script>
  
    // 获取box1
    var box1 = document.getElementById("box1");
    // 获取btn01
    var btn01 = document.getElementById("btn01");

    //定义一个变量，用来保存定时器的标识
    var timer;

    // 点击按钮以后，使box1向右移动（left值增大）
    btn01.onclick = function(){

        // 关闭上一个定时器 ,防止定时器重叠速度异常
        clearInterval(timer);

        // 开启一个定时器，用来执行动画效果
        timer = setInterval(function(){
            // 获取 box1 的原来的left值
            var oldValue = parseInt(getStyle(box1,"left"));

            // 在旧值的基础上增加（控制速度）
            var newValue = oldValue + 1;

            // 当 newValue 大于800时，使其等于800，防止等于 801 的情况
            if(newValue > 800){
                newValue = 800;
            }
            box1.style.left = newValue + "px";

            // 判断 newValue 是否等于800，
            if(newValue == 800){
                // 如符合判断则关闭定时器
                clearInterval(timer);
            }
        }, 30);
    };


    // 定义一个函数，返回一个元素的 当前样式属性值
    function getStyle(obj,name){
        // 判断浏览器是否有该方法，使其兼容不同的浏览器
        if(window.getComputedStyle){
            // getComputedStyle() 返回一个元素的 当前样式属性值
            return getComputedStyle(obj,null)[name];
        }else{
            // 同上 写法不同（兼容IE8）
            return obj.currentStyle[name];
        }
    }
</script>
